<template>
  <div class="page-payment-wrap">
    <h3>付款记录</h3>
    <el-card
      v-loading="isLoading"
      id="table-container"
      style="height: calc(100% - 45px); margin-top: 20px; position: relative"
    >
      <div id="query">
        <el-form class="query-box">
          <el-form-item label="昵称">
            <el-input
              v-model="query.nickName"
              placeholder="请输入"
              style="width: 200px"
              @blur="getTableList"
              @keyup.enter="getTableList"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input
              v-model="query.phoneNo"
              placeholder="请输入"
              style="width: 200px"
              @blur="getTableList"
              @keyup.enter="getTableList"
            ></el-input>
          </el-form-item>
          <el-form-item label="付款时间">
            <el-date-picker
              v-model="query.dates"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              range-separator="至"
              :shortcuts="shortcuts"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 23, 59, 59)]"
              @change="getTableList"
            />
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData" border :height="tableHeight" style="width: 100%" align="center">
        <el-table-column prop="nickName" label="昵称"> </el-table-column>
        <el-table-column prop="phoneNo" label="手机号"> </el-table-column>
        <el-table-column prop="paymentTime" label="付款时间"> </el-table-column>
      </el-table>
      <div style="position: absolute; right: 20px; bottom: 20px">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="settings.pagination.pageSizes"
          :background="settings.pagination.background"
          :layout="settings.pagination.layout"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import settings from '@/utils/settings'
import shortcuts from '@/utils/shortcuts'
import { getPaymentListApi } from '@/api/payment'
import { useLoading } from '@/hooks/loading'
const { isLoading, startLoading, endLoading } = useLoading()

const query = ref({})

const tableData = ref([])

const currentPage = ref(1)
const totalCount = ref(0)
const pageSize = ref(settings.pagination.pageSizes[0])
const handleSizeChange = (size) => {
  pageSize.value = size
  getTableList()
}
const handleCurrentChange = (page) => {
  currentPage.value = page
  getTableList()
}

const getTableList = async () => {
  startLoading()
  const params = {
    offset: currentPage.value - 1,
    pageSize: pageSize.value,
    ...query.value
  }
  if (query.value.dates && query.value.dates.length) {
    params.createdTimeStart = query.value.dates[0]
    params.createdTimeEnd = query.value.dates[1]
    delete params.dates
  }
  const res = await getPaymentListApi(params)
  if (res && res.code === 200) {
    tableData.value = res.body.list
    totalCount.value = res.body.totalCount
  }

  endLoading()
}

const tableHeight = ref(0)
// 动态设置表格高度
const setTableHeight = () => {
  const container = document.getElementById('table-container')
  const queryDom = document.getElementById('query')
  const height = container.offsetHeight - queryDom.offsetHeight
  tableHeight.value = height - 90 + 'px'
}

onMounted(() => {
  setTableHeight()
  window.addEventListener('resize', setTableHeight)
  getTableList()
})

onUnmounted(() => {
  window.removeEventListener('resize', setTableHeight)
})
</script>

<style scoped lang="less">
.page-payment-wrap {
  padding: 30px;
  box-sizing: border-box;
  height: 100%;
  h3 {
    margin: 0 0 20px;
  }
  .query-box {
    display: flex;
    flex-wrap: wrap;
    :deep(.el-form-item) {
      margin: 0 20px 20px;
    }
  }
}
</style>
